iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 10
3

CSS動畫-範例(一):ㄌㄩㄝ~

哀~到了今天鐵人已經寫了10天~
「下班寫鐵人寫到熬夜,上班打瞌睡又被老闆念」
是不是會想對老闆做這個表情,大概是像下面的圖

既然不能真的對老闆做鬼臉,那就只能在鐵人文發個鬼臉動圖過過乾癮了~
就來看看是怎麼寫的吧~

下面只貼了動畫部分的CSS,如果要看更詳細的部分可看下面連結
<完整CodePen連結點這裡>
基本上都是用了前面教的animationtransform喔~

HTML

<body>
  <div class="face">
    <div class="eye left"></div>
    <div class="eye right"></div>
    <div class="hand left"></div>
    <div class="hand right"></div>
    <div class="mouth">
      <div class="tongue"></div>
    </div>
  </div>
</body>

CSS

.face{
animation:face 3s  cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}
@keyframes face{
  from{
      width:150px;
      border-radius:50% 50% 50% 50%; 
  }
  to{
    width:155px;
    border-radius:50% 50% 30% 30%; 
  }
}
.eye.left{
  animation:eyeleft 3s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
  transform-origin:top right;
}
@keyframes eyeleft{
  from {
    transform:skew(0deg,0deg);
  }
  to{
    transform:skew(-10deg,-20deg);
  }
}
.eye.right{
  animation:eyeright 3s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
  transform-origin:top left;
}
@keyframes eyeright{
  from {
    transform:skew(0deg,0deg);
  }
  to{
    transform:skew(10deg,20deg);
  }
}
.hand.left{
  animation:pullleft 3s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}
@keyframes pullleft{
  from{
    left:-3%;
  }
  to{
    left:-10%;
  }
}
.hand.right{
  animation:pullright 3s cubic-bezier(0.68, -0.55, 0.265, 1.55)  infinite;
}
@keyframes pullright{
  from{
    right:-3%;
  }
  to{
    right:-10%;
  }
}
.mouth{
  animation:pullmouth 3s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}
@keyframes pullmouth{
  from{
    left:33%;
    width:50px;
  }
  to{
   left:23%;
   width:80px;
  }
}
.tongue{
  animation:Tongueout 3s  cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
  transform-origin:top center;
}
@keyframes Tongueout {
  from{
    transform:scale(1,1);
  }
   to{
    transform:scale(1,5);
  }
}

如果忘記了之前學的東西,沒關係來複習一下吧!

~不專業學習筆記,如有疑問或是錯誤,歡迎不吝指教~


上一篇
CSS動畫-Transition、Animation、Transform的分析比較
下一篇
CSS動畫-範例(二):萬聖節快樂!:目 (1)
系列文
30天讓設計師搞定CSS/SVG動畫30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言